<template>
  <div>
    <el-dialog
        title="附属品管理"
        v-model="dialogVisible"
        @close="dialogVisible = false"
    >
      <el-button
          type="primary"
          size="small"
          @click="handleAdd"
          style="margin-right: 40px"
      >添加</el-button
      >
      <el-popconfirm title="确定要删除吗？" @onConfirm="handleDelete()">
        <template #reference>
          <el-button type="danger" size="small">
            批量删除
          </el-button>
        </template>
      </el-popconfirm>
      <el-table
          ref="tableRef"
          :data="accessories"
          @selection-change="handleSelectChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="名称" width="120">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120">
        </el-table-column>
        <el-table-column prop="createtime" label="创建日期" width="240">
        </el-table-column>
      </el-table>
      <!--添加附属品对话框-->
      <el-dialog
          title="添加附属品"
          v-model="addDialogVisible"
          @close="cancel"
          append-to-body
      >
        <el-form :model="addAccessory" label-width="70px">
          <el-form-item label="名字" prop="name">
            <el-input v-model="addAccessory.name"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="addAccessory.price"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="commitAdd">确 定</el-button>
        </template>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { findList, insert, deleteBatch } from '../services/Accessory.ts';
import {AxiosResponse} from 'axios';

interface Accessory {
  name: string;
  price: string;
  carid: string;
}

export default defineComponent({
  name: 'Accessory',

  setup() {
    const state = reactive({
      // 整体是否可见
      dialogVisible: false,
      // 添加附属品对话框是否可见
      addDialogVisible: false,
      // 附属品数据
      accessories: [] as Accessory[],
      // 新增附属品数据
      addAccessory: {
        name: '',
        price: '',
        carid: '',
      } as Accessory,
      // 产品id
      carid: '',
      // 批量删除的数据
      ids: [] as Accessory[],
    });

    const tableRef = ref<HTMLTableElement | null>(null);

    const methods = {
      // 点击新增时调用
      handleAdd() {
        state.addDialogVisible = true;
      },
      // 点击删除时调用
      handleDelete() {
        if (state.ids.length === 0) {
          ElMessage.info('未选择');
          return;
        }
        const data = state.ids.map(item => item.carid);
        deleteBatch(data).then(() => {
          ElMessage.success('批量删除成功');
          methods.refresh();
        });
      },
      // 点击取消新增时调用
      cancel() {
        state.addDialogVisible = false;
      },
      // 确认新增
      commitAdd() {
        state.addDialogVisible = false;
        state.addAccessory.carid = state.carid;
        insert(state.addAccessory).then(() => {
          methods.refresh();
          ElMessage.success('新增成功');
          // 新增对象置空
          Object.keys(state.addAccessory).forEach(key => {
            (state.addAccessory as any)[key] = '';
          });
        });
      },
      // 父组件通过调用该方法显示该组件
      show(carid: string) {
        state.carid = carid;
        state.dialogVisible = true;
        methods.refresh();
      },
      // 刷新附属产品数据
      refresh() {
        findList(state.carid).then((response:AxiosResponse<any>) => {
          state.accessories = response.data.data;
        });
      },
      // 选择发生变化时调用
      handleSelectChange(selection: Accessory[]) {
        state.ids = selection;
      },
    };

    return {
      ...toRefs(state),
      ...methods,
      tableRef,
    };
  },
});
</script>

<style lang="css" scoped></style>
